import styled from 'styled-components'
export const WrapperContainer = styled.div`
    height:285px;
    background:url(${props=>props.bgImage}) center center/6000px;
    .wrap-v2{
        display:flex;
    }
`
export const BannerLeft = styled.div`
    height:285px;
    width:726px;
    img{
        height:285px;
    }
    .ant-carousel .slick-dots li button{
        height:8px;
        width:8px;
        border-radius:50%;
    }

     
`
export const BannerRight = styled.div`
    background:url(${require("@/assets/img/download.png").default});
    width:254px;
    height:285px;
     
`
export const BannerControl = styled.div`
    position: relative;
    .btnLeft{
        width:37px;
        height:63px;
        background:url(${require('@/assets/img/banner-control-left.png').default});
        position:absolute;
        top:50%;        
        left:-1035px;
    }
    .btnLeft:hover{
        background-color:rgba(0,0,0,.1);
    }
    .btnRight{
        position:absolute;
        width:37px;
        height:63px;
        background:url(${require('@/assets/img/banner-control-right.png').default});
        top:50%;
        left:10px;
    }
    .btnRight:hover{
        background-color:rgba(0,0,0,.1);
    }
`